/**
 * 推荐页面-新碟上架
 */
import { Carousel } from 'antd';
import React, { memo, useEffect, useState, useRef } from 'react'
import { getNewAlbums } from '../../../../../../request/recommend';
import RecommendHeader from '../../c-component/recomend-header'
import { NewDiscsShelvesWrapper } from './style'
import AlbumItem from '@/components/album-item'
import { sliceArray } from '../../../../../../utils';

export default memo(function NewDiscsShelves() {

    const [albumsList, setAlbumsList] = useState([]);
    const carouselRef = useRef();

    useEffect(() => {
        getNewAlbums(10).then((res) => {
            const data = sliceArray(res.albums, 5);
            console.log(`data`, data);
            setAlbumsList(data);
        }).catch((error) => {
            console.log(`error`, error);
        });
    }, []);

    return (
        <NewDiscsShelvesWrapper>
            <RecommendHeader title="新碟上架"
                mainLink="/discover/album"
                moreLink="/discover/album"
            ></RecommendHeader>

            <div className="shelver-content">
                <Carousel className="carousel-wrapper" ref={carouselRef}>
                    {
                        albumsList.map((itemArray, _) => {
                            return <div >
                                {
                                    itemArray.map((item, _) => {
                                        return <AlbumItem key={item.id} {...item}></AlbumItem>
                                    })
                                }
                            </div>
                        })
                    }
                </Carousel>
                <button className="carousel-left recommend_hot_image" onClick={() => carouselRef.current.prev()}></button>
                <button className="carousel-right recommend_hot_image" onClick={() => carouselRef.current.next()}></button>
            </div>
        </NewDiscsShelvesWrapper>
    )
})
